<template>
<div>
  <!--警告-->
  <div class="Notice sm_font">
    注意：暂不支持换卡,请保证此次添加的银行卡永久使用
  </div>
  <div class="txt md_s_font color_gray">银行卡信息</div>
  <div class="input_msg">
    <div class="msg">持卡人</div>
    <input type="text" class="md_s_font" ref="usrName" name="usr" @input="veriNAme($event.target.value)" value="" placeholder="请输入持卡人姓名"/>
  </div>
  <div class="input_msg" @click="bankCard = true">
    <div class="msg">卡类型</div>
    <input type="text" class="md_s_font" v-model="cardType" placeholder="请选择银行卡类型" readonly/>
  </div>
  <div class="input_msg" style="margin: 1px 0;">
    <div class="msg">卡号</div>
    <input type="tel" pattern="^62[0-5]\d{13,16}$" onkeyup="value=value.replace(/[^\d]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g, ''))" class="md_s_font" placeholder="请输入银行卡卡号" v-model="cardNum" minlength="16" :maxlength="cardType=='借记卡'?19:16" />
  </div>
  <div class="txt color_gray">身份证信息</div>
  <div class="input_msg" style="margin: 1px 0;" @click="usrCard = true">
    <div class="msg">证件类型</div>
    <input type="text" class="md_s_font" v-model="usrType" placeholder="请选择证件类型" readonly>
  </div>
  <div class="input_msg">
    <div class="msg">证件号</div>
    <input type="text" class="md_s_font" name="usrType" @input="veriUsrNum($event.target.value)" placeholder="请输入证件号" ref="usrNum" />
  </div>
  <div class="withdrawals_btn" :class="{'gray_btn':!nextStepBtn, 'next_step_btn': nextStepBtn}"  @click="nextStep">下一步</div>
  <mt-actionsheet :actions="cardTypes" v-model="bankCard"></mt-actionsheet>
  <mt-actionsheet :actions="usrTypes" v-model="usrCard"></mt-actionsheet>
</div>
</template>

<script>
import { Actionsheet, Toast } from 'mint-ui';
import {bindCard} from 'src/service/getData3.js';
import {mapGetters} from 'vuex';
import { Storage } from 'src/utils/storage.js'

export default {
	name: 'add-bank-card',
  components: {
    MtActionsheet: Actionsheet
  },
  data() {
    return {
      usrCard: false, // 身份证
    	bankCard: false, // 银行卡
      cardTypes: [{
        method: this.chooseCardType,
        name: '借记卡',
				key: 'D'
      }, {
        method: this.chooseCardType,
        name: '贷记卡',
				key: 'C'
      }], // 银行证件类型
			cardType: '', // 银行卡类型
			certType: '', // 银行卡类型Key
			usrName: '', //持卡人
			cardNum: '', // 卡号
			usrTypes: [{
				method: this.chooseUsrType,
				name:'身份证'
			}],
			usrType: '', // 证件类型
			usrCardNum: '' // 证件号
    }
  },
	computed: {
		nextStepBtn() {
			return this.usrName && this.cardNum && this.cardType && this.usrType && this.usrCardNum
		},
		...mapGetters(['usrId'])
	},
  created: function() {
    console.log(this.$route.meta.keepAlive);
  },
  methods: {
    chooseUsrType(val) {
			this.usrType = val.name
    },
		chooseCardType(val) {
			this.cardType = val.name
			this.certType = val.key
      		this.cardNum = ''
		},
    veriNAme(val) { // 验证名字
      if (process.env.NODE_ENV === 'development') {
        this.usrName = val
        return
      }

      if ((/^([\u4e00-\u9fa5\·]{1,6})$/).test(val)) {
        this.$refs.usrName.value = val
        this.usrName = val
      } else {
        Toast({
          message: '请输入正确的姓名',
          duration: 1000
        })
        this.$refs.usrName.value = val? this.usrName : ''
      }
    },
    veriUsrNum(val) {
      if ((/^([0-9]{1,18})$|^([0-9]{1,17}[Xx]{0,1})$/).test(val)) {
        this.$refs['usrNum'].value = val
        this.usrCardNum = val
      } else {
        Toast({
          message: '请输入正确的证件号',
          duration: 1000
        })
        this.$refs['usrNum'].value = val? this.usrCardNum : ''
      }
    },
		async nextStep() {
			if (this.nextStepBtn) {
        if (!(/^([\u4e00-\u9fa5\·]{2,6})$/).test(this.usrName)) {
          Toast({
            message: '请输入正确的姓名',
            duration: 1000
          })
          this.usrName = ''
          return
        }
				// 验证银行卡卡号  cardNum
				if (this.cardNum.length < 16 || this.cardNum.length > 19) {
					Toast({
						message: '请输入正确的银行卡卡号',
						duration: 1000
					})
          this.cardNum = ''
					return
				}
				// 验证身份证件号  usrCardNum
				if (this.usrCardNum.length !== 18) {
					Toast({
						message: '请输入正确的证件号',
						duration: 1000
					})
          this.usrCardNum = ''
					return
				}
				try {
          if (!(/^62[0-5]\d{13,16}$/).test(this.cardNum)) {
            Toast({
              message: '请输入正确的银行卡卡号',
              duration: 1000
            })
            this.cardNum = ''
            return
          } else if (!(/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/).test(this.usrCardNum)) {
            Toast({
              message: '请输入正确的证件号',
              duration: 1000
            })
            this.usrCardNum = ''
            return
          }
					let res = await bindCard({
						accountName: this.usrName, //绑卡人
						bankCardNo: this.cardNum, // 绑卡卡号
						certNo: this.usrCardNum, // 证件号码
						certType: this.certType, // 绑卡类型
						usrId: this.usrId // 绑卡用户
					})
					if (res.respCode !== '00') {
						throw new Error(res.errorInfo)
					} else {
            Storage.remove('CardInfor', true)
    				// 短信验证页面
    				this.$router.push({path: '/verification'})
            return
          }
				} catch (e) {
					Toast({
						message: e.message,
						duration: 1000
					})
				}
			}
		}
  },
  beforeRouteLeave(to, from, next){

    next()
  }
}
</script>

<style scoped="scoped" lang="scss">
@mixin background_bg($size, $sit) {
    background-repeat: no-repeat;
    background-size: $size;
    background-position: $sit;
}
.Notice {
    width: 100%;
    background: #fcf2b7;
    line-height: 2rem;
    text-indent: 1rem;
    padding-left: 2rem;
    background-image: url("../../../images/zhuyi.png");
    @include background_bg(auto 1.2rem, 1rem center);
}

.withdrawals_btn{
	width: 90%;
	height: 3rem;
	margin: auto;
	margin-top: 5rem;
	text-align: center;
	line-height: 3rem;
	border-radius: .3rem;
}
.gray_btn {
	background-color: #ccc;
}
.next_step_btn {
	background-color: #eb4e89;
	color: #fff;
}
.txt {
    height: 3rem;
    line-height: 4rem;
    text-indent: 1rem;
}
.msg {
    float: left;
    width: 20vw;
    font-size: 1rem;
    color: #333;
}
input::-webkit-input-placeholder {
    color: #ccc;
}
.input_msg {
    line-height: 3rem;
    padding: 0 1rem;
    background: white;
}
.input_msg input {
    color: #333;
    width: 70vw;
}
</style>
